<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="registration-icon"
  >
    <!-- 文档背景 -->
    <rect
      x="12"
      y="8"
      width="40"
      height="48"
      rx="4"
      fill="url(#registration-gradient-1)"
    />
    <!-- 文档顶部折角 -->
    <path
      d="M52 8V16L44 8H52Z"
      fill="url(#registration-gradient-2)"
      opacity="0.5"
    />
    <!-- 文字行1 -->
    <rect
      x="18"
      y="18"
      width="28"
      height="3"
      rx="1.5"
      fill="white"
      opacity="0.8"
    />
    <!-- 文字行2 -->
    <rect
      x="18"
      y="26"
      width="24"
      height="3"
      rx="1.5"
      fill="white"
      opacity="0.7"
    />
    <!-- 文字行3 -->
    <rect
      x="18"
      y="34"
      width="20"
      height="3"
      rx="1.5"
      fill="white"
      opacity="0.7"
    />
    <!-- 签名线 -->
    <line
      x1="18"
      y1="46"
      x2="46"
      y2="46"
      stroke="white"
      stroke-width="2"
      stroke-dasharray="2 2"
      opacity="0.6"
    />
    <!-- 笔 -->
    <g transform="translate(38, 42)">
      <!-- 笔杆 -->
      <rect
        x="0"
        y="0"
        width="4"
        height="16"
        rx="2"
        fill="url(#pen-gradient)"
      />
      <!-- 笔尖 -->
      <path
        d="M0 16L2 20L4 16Z"
        fill="#FFD700"
      />
      <!-- 笔夹 -->
      <rect
        x="3"
        y="3"
        width="1"
        height="6"
        fill="white"
        opacity="0.8"
      />
    </g>

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="registration-gradient-1" x1="12" y1="8" x2="52" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#7ee8fa" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="registration-gradient-2" x1="44" y1="8" x2="52" y2="16" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="pen-gradient" x1="0" y1="0" x2="0" y2="16" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#FFD700" />
        <stop offset="100%" stop-color="#FFA500" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.registration-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.registration-icon:hover {
  transform: scale(1.05) rotate(3deg);
}
</style>
